<template>
  <div class="review-timeline">
    <!-- 驳回详情弹窗 -->
    <reject-dialog ref="rejectDialog"/>
    
    <!-- 时间线主体（严格匹配图像设计） -->
    <div 
      v-for="(stage, index) in stages" 
      :key="index" 
      class="timeline-item"
      :class="{ 'rejected-item': stage.status === 'rejected' }"
      @click="handleItemClick(stage)"
    >
      <div class="status-indicator" :style="indicatorStyle(stage)"></div>
      <div class="content">
        <h3 :style="titleStyle(stage)">{{ stage.title }}</h3>
        <p class="time">{{ stage.time }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import RejectDialog from './RejectDialog'

export default {
  components: { RejectDialog },
  props: {
    stages: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(item => ['pending', 'approved', 'rejected'].includes(item.status))
      }
    }
  },
  methods: {
    // 处理点击事件（匹配图像中的交互逻辑）
    handleItemClick(stage) {
      if (stage.status === 'rejected') {
        this.$refs.rejectDialog.title = stage.rejectTitle
        this.$refs.rejectDialog.details = stage.rejectReason
        this.$refs.rejectDialog.attachments = stage.attachments
        this.$refs.rejectDialog.open()
      }
    },
    // 状态指示器样式（蓝色/红色圆点）
    indicatorStyle(stage) {
      return {
        backgroundColor: stage.status === 'rejected' ? '#f5222d' : '#1890ff',
        width: '12px',
        height: '12px'
      }
    },
    // 标题颜色（匹配图像中的红黑配色）
    titleStyle(stage) {
      return {
        color: stage.status === 'rejected' ? '#f5222d' : '#333'
      }
    }
  }
}
</script>

<style scoped>
.review-timeline {
  padding: 20px 0;
}

.timeline-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  margin: 8px 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.timeline-item:hover {
  background-color: #f5f5f5;
}

.status-indicator {
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.content {
  flex-grow: 1;
}

.time {
  color: #666;
  font-size: 12px;
  margin-top: 4px;
}

/* 驳回状态特殊样式（匹配图像中的左侧红线） */
.rejected-item {
  border-left: 3px solid #ffccc7;
  background-color: #fff1f0;
  margin-left: -3px;
  padding-left: 20px;
}
</style>